import React from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import { UserOutlined, LaptopOutlined } from "@ant-design/icons";
import { userEditorInfo } from "../../../../routers";
import { Route, Switch } from "react-router";
import { Redirect } from "react-router-dom";

const { Content, Sider } = Layout;

function UserEdit(props) {
  const goToPage = (value) => {
    props.history.push(value.key);
  };
  return (
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          style={{ height: "100%", borderRight: 0 }}
        >
          <Menu.Item
            key="/admin/manager/useredit/searchuser"
            id="UserEditMenu_1_1"
            onClick={goToPage}
            icon={<UserOutlined />}
          >
            用户信息查询
          </Menu.Item>
          <Menu.Item
            key="/admin/manager/useredit/adduser"
            id="UserEditMenu_1_2"
            onClick={goToPage}
            icon={<LaptopOutlined />}
          >
            增添新用户
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout style={{ padding: "0 24px 24px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>管理员</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          <Breadcrumb.Item>用户编辑</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Switch>
            {userEditorInfo.map((item) => {
              return (
                <Route
                  key={item.path}
                  path={item.path}
                  exact={item.exact}
                  render={(routeProps) => {
                    return <item.component {...routeProps} />;
                  }}
                />
              );
            })}
            <Redirect to="/admin/manager/useredit/searchuser" />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
}

export default UserEdit;
